import React, { Component } from 'react'
import { DetailWrapper, Title, Content } from "./style"
import { connect } from "react-redux"
import { action } from "./store"
import { withRouter } from 'react-router-dom'

class Detail extends Component {
    render() {
        if (this.props.isLogin === false) {
            return <div>isLogin=false by detail.js</div>
        } else {
            return (
                <DetailWrapper>
                    <Title>{this.props.title}</Title>
                    <Content dangerouslySetInnerHTML={{ __html: this.props.content }}>
                    </Content>
                </DetailWrapper>
            )
        }

    }
    componentDidMount() {
        this.props.getDetail(this.props.match.params.id);
    }
}
const mapState = (state) => ({
    title: state.getIn(["detail", "title"]),
    content: state.getIn(["detail", "content"]),
    isLogin: state.getIn(["login", "login"])
})
const mapMethods = (dispatch) => {
    return {
        getDetail(id) {
            dispatch(action.getDetail(id))
        }
    }
}
export default connect(mapState, mapMethods)(withRouter(Detail))